<template>
    <div>
        <header-top headTitle='登陆'></header-top>
        <div class='form-content'>
            <img src="../../../assets/images/logo.png" alt="">
            <form action="" id="loginForm">
                <ul>
                    <li class='inputItem'>
                        <input type="text" class='username' name='username' id='username' placeholder="请输入你的用户名或手机号码">
                        <i><img src="../../../assets/images/phone.png" alt=""></i>
                    </li>
                    <li class='inputItem'>
                        <input type="text" class='userpwd' name='userpwd' id='userpwd' placeholder="请输入你的密码">
                        <i><img src="../../../assets/images/pwd.png" alt=""></i>
                    </li>
                </ul>
            </form>
            <div class='inputBtn'>
            <div class="loginBtn">登陆</div>
            </div>
            <div class="login-other">
            <ul class='clearfix'>
                <li tapmode onclick="jumpToRegister()"><span>没有账号？马上注册！</span></li>
                <li><span>忘记密码？找回密码！</span></li>
            </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import headerTop from 'components/common/header.vue';
    import 'lib/jquery.validate.min.js'
 
    export default {
        data() {
            return {
              msg:'nono'
            }
        },
        created() {

        },
        mounted(){
            this.init()
        },
        components:{
            headerTop
        },
        methods:{
            init(){
                    $('#loginForm').validate({
                        debug: true, //调试模式取消submit的默认提交功能
                        errorClass: "showerror",
                        focusInvalid:false,
                        focusCleanup:true,
                        onblur:false,
                        onfocusout:false,
                        onkeyup:false,
                        rules:{
                            username:{
                                required:true,
                                isphone:true,
                                minlength:11,
                                maxlength:11
                            },
                            userpwd:{
                                required:true,
                                ispsw:true
                            }
                        },
                        messages:{
                            username:{
                                required:"请输入手机号哦~",
                                isphone:'请输入正确格式手机号哦~',
                                maxlength:'手机长度为11位哦~'
                            },
                            userpwd:{
                                required:"请输入验证码哦~",
                                ispsw:'请输入6-30位字符',
                            }
                        },
                        // groups:{
                        //     username:"username userpwd"
                        // },
                        errorElement:'div',
                        errorPlacement:function(error,element){
                            if(element.attr('name')=="username"||
                            element.attr('name')=="userpwd"){
                                alert(error[0].textContent)
                                // showToastMsg(error[0].textContent)
                            }
                        }
                    });

                    $.validator.addMethod('isphone',function(value,element){
                        var REG = /^1[3|4|5|8][0-9]\d{4,8}$/;
                        return this.optional(element) || (REG.test(value));
                    });
                    $.validator.addMethod('ispsw',function(value,element){
                        var REG = /^\w{6,30}$/;
                        return this.optional(element) || (REG.test(value));
                    });

                    $('.loginBtn').click(function(){
                    if(!$("#username").valid()||
                        !$("#userpwd").valid()){
                    }else{
                        //验证通过，发送请求
                        // showWaitingProgress();
                        apiPost({
                            url:'https://www.51jili.com/Api/login',
                            values:{
                                'account':$("#username").val(),
                                'password':$("#userpwd").val()
                            },
                            fun:function (ret,err){
                                
                            }
                        })
                    }
                    })
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../../assets/css/mixin.scss';
    .form-content{
        text-align: center;
        padding:20px 10px 50px;
        > img{
            display:inline-block;
            width:200px;
        }
        form {
            ul{
                margin-top:20px;
                .inputItem{
                    position:relative;
                    > input{
                        width: 100%;
                        height: 60px;
                        line-height: 30px;
                        padding: 15px 10px 15px 50px;
                        background: #fff;
                        border: 1px solid #e5e5e5;
                        border-radius: 5px;
                        margin-bottom:10px;
                        font-size:14px;
                    }
                    > i{
                        position:absolute;
                        top:10px;
                        left:10px;
                    }
                }
            }
        }
        .inputBtn {
            margin:20px 0;
            .loginBtn{
                background:$bc;
                color:#fff;
                height:45px;
                line-height:45px;
                @include borderRadius(5px);
            }
        }
    }
    .login-other{
        margin-top:0px;
        li{
            float:left;
            width:50%;
            text-align:center;
            padding:0 5px;
            color:#999;
            > span{
                display:block;
                width:100%;
                border:1px dashed #bfbfbf;
                height:45px;
                line-height:45px;
                border-radius:5px;
                @include sc(14px,#999);
            }
        }
    }


</style>
